@include('admin.header')
<div class="x-body">
    <form class="layui-form" enctype="multipart/form-data">
        <div class="layui-form-item">
            <label for="goods_name" class="layui-form-label">
                <span class="x-red">*</span>链接名称
            </label>
            <div class="layui-input-inline">
                <input type="text" id="goods_name" name="link_name" required lay-verify="required"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label for="goods_price" class="layui-form-label">
                <span class="x-red">*</span>链接排序
            </label>
            <div class="layui-input-inline">
                <input type="number" id="goods_price" name="link_sort" required lay-verify="required"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label for="goods_price" class="layui-form-label">
                <span class="x-red">*</span>链接地址
            </label>
            <div class="layui-input-inline">
                <input type="text" id="goods_price" name="link_url" required lay-verify="required"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                <legend>链接图片</legend>
            </fieldset>
            <div class="layui-input-inline imgbox" style="width: 400px;">
                <div class="layui-upload-drag" id="main_img">
                    <i class="layui-icon"></i>
                    <p>点击上传，或将文件拖拽到此处</p>
                </div>
            </div>
        </div>



        <div class="layui-form-item">
            <label for="addtime" class="layui-form-label">
                <span class="x-red">*</span>添加时间
            </label>
            <div class="layui-input-inline">
                <input class="layui-input" placeholder="" name="link_addtime" id="addtime">
            </div>
        </div>


        <div class="layui-form-item">
            <label for="L_repass" class="layui-form-label">
            </label>
            <button  class="layui-btn" lay-filter="add" lay-submit="" id="btn">
                增加
            </button>
        </div>
    </form>
</div>
<div class="alert">
    提示信息
</div>
<style>
    .alert{
        position: fixed;
        width: 280px;
        height: 50px;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        z-index: 9999;
        color: #fff;
        text-align: center;
        line-height: 50px;
        font-size: 16px;
        display: none;
    }
</style>
<script>
    //重置分页的样式
    function resetpage(){
        //把span标签改成a标签
        var spans = parent.$('.page-item span');
        for (let i = 0; i < spans.length; i++) {
            spans[i].outerHTML="<a href=''>"+spans[i].innerHTML+"</a>";
        }
        var arr = parent.$(".page-item a");
        for (let i = 0; i < arr.length; i++) {
            if (arr[i].innerHTML=="‹") {
                arr[i].className = "prev";
            }else if(arr[i].innerHTML=="›"){
                arr[i].className = "next";
            }
        }
        //将当前页设置为active
        parent.$(".active a").attr("class","num active");
        //把li 上面的active 去除
        parent.$("li.active").removeClass("active");
        //给页码a标签换类名
        parent.$(".page-item .page-link").attr("class","num");
    }
    //更新父级窗口的数据
    function getGoodData(page){
        $.ajax({
            type:"get",
            url:"{{url('/admin/toget_link_list')}}",
            data:"page="+page,
            dataType:"html",
            success:function(res){
                parent.$(".list").html(res);
                resetpage();

            }
        })
    }
    //请求接口获取所有数据的条数
    function getCount(){
        $.ajax({
            type:"get",
            url:"{{url('/admin/toget_link_count')}}",
            data:"",
            dataType:"text",
            success:function(res){
                parent.$(".count").html("共有管理员："+res+" 人");
            }
        })
    }
    layui.use('laydate', function(){
        var laydate = layui.laydate;

        //执行一个laydate实例
        laydate.render({
            elem: '#addtime' //指定元素
        });

    });

    layui.use(['form','layer','upload'], function(){
        var $ = layui.jquery;
        var form = layui.form
            ,layer = layui.layer
            ,upload = layui.upload;


        upload.render({
            elem: '#main_img',
            // url: '/api/upload/',
            auto: false, //选择文件后不自动上传
            // bindAction: '#sub', //指向一个按钮触发上传
            choose: function(obj){
                //将每次选择的文件追加到文件队列
                var files = obj.pushFile();
                //预读本地文件，如果是多文件，则会遍历。(不支持ie8/9)
                obj.preview(function(index, file, result){
                    // console.log(index); //得到文件索引
                    // console.log(file); //得到文件对象
                    image = file;
                    // console.log(result); //得到文件base64编码，比如图片
                    $(".imgbox").html("<img style='display:block;width:400px' src='"+result+"'>");
                });
            }

        });
        var image = null;
        //监听提交
        form.on('submit(add)', function(data){

            //data.field.good_dec = layedit.getContent(index);



            data.field.file = image;
            console.log(data.field);
            //console.log(image);
            dataobj = data.field;
            var formData = new FormData();
            //formData.append('main_img', image);
            for (const key in dataobj) {
                formData.append(key,dataobj[key]);
            }
            // // console.log(formData);
            $.ajax({
                url:"/admin/todo_addlink",
                type:"post",
                data: formData,
                contentType: false,
                processData: false,
                dataType:"json",
                success: function(res) {
                    //console.log(res);
                    if(res.code==1){
                        getGoodData(1);
                        getCount();
                        layer.alert(res.msg,function () {
                            // 获得frame索引
                            var index = parent.layer.getFrameIndex(window.name);
                            //关闭当前frame
                            parent.layer.close(index);
                        });
                    }else{
                        layer.alert(res.msg);
                    }
                },
                error:function(data) {
                    $(".alert").html("服务器错误！").css({"background-color":"#41b314bb","border-color":"#3ca512bb"}).stop().fadeIn(500);
                    setTimeout(function () {
                        $(".alert").fadeOut(500);
                    },2000)
                }
            });
            //发异步，把数据提交给php

            return false;
        });

    });

</script>
</body>

</html>